<!DOCTYPE html>
<html>
<head>
  <title>Neasho App Generator</title>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app">
  <!-- 写出布局(基于element-ui) -->
  <!-- 一个宽度是页面80%的Input框，以及一个搜索按钮，input框监控input事件，按下enter后触发确认事件 -->
  <el-row :gutter="24" justify="center">
    <el-col :span="20">
      <el-select
              v-model="searchKeyword"
              multiple
              style="width:200px"
              filterable
              placeholder="请输入关键词"
      >
        <el-option
                v-for="item in tableList"
                :key="item.tableName"
                :label="item.tableName+'-'+item.tableComment"
                :value="item.tableName">
        </el-option>
      </el-select>
      <el-button @click="handleConfirm">确认</el-button>
    </el-col>
  </el-row>
  <br>
  <el-row :gutter="24" justify="center">
    <el-col :span="20">
      <el-tag
              v-for="tag in searchKeyword"
              :key="tag"
              closable
              @close="searchKeyword.splice(searchKeyword.indexOf(tag), 1)"
              size="middle"
              type="success">
        {{tag}}
      </el-tag>

    </el-col>
  </el-row>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/index.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: function() {
      return {
        tableList: [
          {tableName: 'sys_user', tableComment: '用户表', columns: [
                {columnName: 'id', columnComment: '主键', columnType: 'int(11)'},
                {columnName: 'username', columnComment: '用户名', columnType: 'varchar(255)'},
                {columnName: 'password', columnComment: '密码', columnType: 'varchar(255)'},
                {columnName: 'create_time', columnComment: '创建时间', columnType: 'datetime'},
                {columnName: 'update_time', columnComment: '更新时间', columnType: 'datetime'},
            ]},
          {tableName: 'sys_menu', tableComment: '菜单表', columns: [
                {columnName: 'id', columnComment: '主键', columnType: 'int(11)'},
                {columnName: 'username', columnComment: '用户名', columnType: 'varchar(255)'},
                {columnName: 'password', columnComment: '密码', columnType: 'varchar(255)'},
                {columnName: 'create_time', columnComment: '创建时间', columnType: 'datetime'},
                {columnName: 'update_time', columnComment: '更新时间', columnType: 'datetime'},
            ]},
          {tableName: 'sys_role', tableComment: '角色表', columns: [
                {columnName: 'id', columnComment: '主键', columnType: 'int(11)'},
                {columnName: 'username', columnComment: '用户名', columnType: 'varchar(255)'},
                {columnName: 'password', columnComment: '密码', columnType: 'varchar(255)'},
                {columnName: 'create_time', columnComment: '创建时间', columnType: 'datetime'},
                {columnName: 'update_time', columnComment: '更新时间', columnType: 'datetime'},
            ]},
        ],
        searchKeyword: [],
      }
    },
    methods: {
      handleConfirm() {
        location.href=''
      }
    }
  })
</script>
</html>

